<template>
  <div class="px-5 pb-10">
    <div class="text-xl font-bold py-1">全部分类</div>
    <!-- 分类导航栏 -->
    <ul class="flex text-[#acacac] py-2 cursor-default">
      <li v-for="(item, index) in [{ name: '热门', catIndex: -1 }].concat(categories)" :key="index"
        :class="{ 'text-green-500': item.catIndex == radarIndex }" class="relative w-24 "
        @click="changeRadar(item.catIndex)">
        {{ item.name }}
        <svg t="1728370675510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="8100" width="25" height="25">
          <path d="M512 512m-160 0a160 160 0 1 0 320 0 160 160 0 1 0-320 0Z"
            :fill="item.catIndex == radarIndex ? '#22c55e' : '#acacac'" p-id="8101"></path>
        </svg>
        <div class="flex gap-2 absolute bottom-[5.5px] left-[22px]">
          <svg v-for="_ in 3" t="1728370675510" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="8100" width="12" height="12">
            <path d="M512 512m-160 0a160 160 0 1 0 320 0 160 160 0 1 0-320 0Z" fill="#acacac" p-id="8101"></path>
          </svg>
        </div>
      </li>
    </ul>
    <!-- 子类列表 -->
    <div class="flex flex-wrap gap-3.5">
      <div class="relative w-32 h-32 group/category my-2.5" v-for="item in songListByCat"
        @click="getPlayListByCat(item.name)">
        <div
          class="w-full h-full rounded-full bg-green-200 flex justify-center items-center text-gray-500 shadow-gray-300 shadow-md"
          style="letter-spacing: 5px;writing-mode: vertical-rl;">{{ item.name }}</div>
        <svg t="1728544607058"
          class="icon absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] invisible group-hover/category:visible"
          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4291" width="35" height="35">
          <path
            d="M897.143467 597.051733l-464.648534 311.5264c-46.976 31.488-110.592 18.944-142.08-28.023466A102.4 102.4 0 0 1 273.066667 823.5264V200.4736c0-56.5504 45.8496-102.4 102.4-102.4a102.4 102.4 0 0 1 57.028266 17.348267l464.64 311.5264c46.976 31.488 59.528533 95.104 28.032 142.08a102.4 102.4 0 0 1-28.023466 28.023466z"
            p-id="4292" data-spm-anchor-id="a313x.search_index.0.i0.55b53a810ZtjXj" class="selected" fill="#fafafa">
          </path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useStore } from '@renderer/store'
import { storeToRefs } from 'pinia'

const { radarStore, playListStore, songDetailStore, songListStore } = useStore()
const { categories, songListByCat, songListId } = storeToRefs(radarStore)
const { songsList } = storeToRefs(songListStore)
const radarIndex = ref(-1)
// 点击选择雷达分类
const changeRadar = (index: number) => {
  radarIndex.value = index
  radarStore.getSongListByCat(index)
}
onMounted(async () => {
  await radarStore.getAllSongListCatList()
  getSongListByCat()
})
const getSongListByCat = async () => {
  await radarStore.getSongListByCat(-1)
}
const getPlayListByCat = async (cat: string) => {
  await radarStore.getSongListIdByCat(cat)
  // 获取播放列表
  await songListStore.getSongListDetail(songListId.value)
  const id = songsList.value[0].id
  // 默认播放歌单第一首歌曲
  songDetailStore.getSongDetail(id)
  songDetailStore.getSongUrl(id)
  // 播放列表添加到播放列表中
  playListStore.addAllSongToPlayList(songsList.value)
}
</script>
